<template>
  <!-- 资讯评论审核 -->
  <div>
    <!-- 表单控件及按钮 -->
    <el-form :inline="true" :model="params" class="demo-form-inline">
      <el-form-item>
        <el-button type="danger" @click="deleteBatch">批量删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="toAdd">申请</el-button>
      </el-form-item>
      <el-form-item>
        <el-input v-model="params.id" placeholder="请输入咨询编号" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <!-- {{ params }} -->
    </el-form>
    <!-- 表单控件及按钮 -->

    <!-- 表格开始 -->
    <el-table
      :data="commentData"
      style="width: 100%"
      @selection-change="handlerChange"
    >
      <el-table-column type="selection" />
      <el-table-column label="序号" type="index" :index="1" align="center" />
      <el-table-column label="评论内容" prop="comment" align="center" />
      <el-table-column label="评论人编号" prop="userId" align="center" />
      <el-table-column label="咨询编号" prop="id" align="center" />
      <el-table-column label="评论时间" prop="commentTime" align="center">
        <template slot-scope="scope">
          <div>
            {{ scope.row.commentTime | parseTime }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="评论状态" prop="status" align="center" />
      <el-table-column label="操作" align="center" />
    </el-table>
    <!-- 表格结束 -->

    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="visible" @close="toClose">
      <el-form ref="myForm" :model="form" :rules="rules">
        <el-form-item
          prop="userId"
          label="评论人编号"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.userId" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="id" label="咨询编号" :label-width="formLabelWidth"
          ><el-input autocomplete="off" />
        </el-form-item>
        <el-form-item
          prop="comment"
          label="评论内容"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.comment" autocomplete="off" />
        </el-form-item>
        {{ form }}
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="toClose()">取 消</el-button>
        <el-button type="primary" @click="toSubmit()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 模态框结束 -->
  </div>
</template>

<script>
import { queryInfoComment, batchDelete, saveOrUpdate } from "@/api/infoComment";
export default {
  data() {
    return {
      params: {
        page: 1,
        pageSize: 10,
      },
      commentData: [],
      ids: [],
      visible: false,
      title: "",
      form: {},
      formLabelWidth: "120px",
      // 表单校验
      rules: {
        // userId: [
        //   { required: true, message: "请输入评论人编号", trigger: "blur" },
        // ],
        // id: [
        //   {
        //     required: true,
        //     message: "请输入咨询编号",
        //     trigger: "blur",
        //   },
        // ],
        // comment: [
        //   {
        //     required: true,
        //     message: "请输入评论内容",
        //     trigger: "blur",
        //   },
        // ],
      },
    };
  },
  computed: {},
  created() {
    this.getInfoComment();
  },
  mounted() {},
  methods: {
    // 分页查询数据
    async getInfoComment() {
      const temp = { ...this.params, ...this.form };
      for (const key in temp) {
        if (!temp[key]) {
          delete temp[key];
        }
      }
      const res = await queryInfoComment(temp);
      console.log(res);
      this.commentData = res.data.list;
    },
    // 批量删除
    async deleteBatch() {
      // 批量删除
      if (this.ids.length > 0) {
        // 执行批量删除
        const res = await batchDelete({
          ids: this.ids.toString(),
        });
        this.$message({
          type: "success",
          message: res.message,
        });
        this.getInfoComment();
      }
    },
    // 选择项发生改变触发的函数
    handlerChange(val) {
      // console.log(val);
      this.ids = val.map((item) => {
        return item.id;
      });
      console.log(this.ids);
    },
    // 增加评论数据
    // 添加按钮弹出模态框
    toAdd() {
      this.visible = true;
      this.title = "新增申请信息";
      this.form = {};
    },
    // 查询按钮
    onSubmit() {
      this.params.page = 1;
      this.getInfoComment();
    },

    // 模态框提交成功的方法
    async toSubmit() {
      console.log(this.form.comment);
      const result = await saveOrUpdate(this.form);
      this.getInfoComment();
      // // 校验表单
      // this.$refs.myForm.validate(async (valid) => {
      //   if (valid) {
      //     // 发送保存或更新的请求
      //     console.log(this.form);
      //     // console.log(form);
      //     let result = await saveOrUpdate(this.form);
      //     console.log(result);
      //     // 提示框
      //     this.$notify({
      //       type: "success",
      //       message: result.message,
      //     });
      //     this.getInfoComment();
      //     this.toClose();
      //   } else {
      //     return false;
      //   }
      // });
    },
    // 关闭模态框触发的回调
    toClose() {
      setTimeout(() => {
        // 重置表单
        this.$refs.myForm.resetFields();
        this.visible = false;
      }, 500);
      // clearTimeout();
    },
  },
};
</script>
<style scoped>
</style>